<template>
  <div id="app">
    <!-- 顶部直通车  -->
     <!-- 组件重载原理 让组件的key属性发送变化 -->
    <TopBar :key = "topBarKeyValue"></TopBar>
    
    <!-- 头部 -->
    <Header></Header>
    <router-view />
    <Footer></Footer>
    <!-- 登陆模态窗口组件 -->
    <Login v-show="isShowLoginModal"></Login>

    <!--transition组件是提供过渡效果  -->
    <transition name="fade">
      <!-- 提示框组件 -->
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template>


<script>
import TopBar from "@/components/TopBar";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Login from "@/components/Login";
import Toast from "@/components/Toast";
import { mapState } from "vuex";

export default {
  data() {
    return {
      topBarKeyValue: 1
    };
  },

    watch:{
     "$route.path":{
         handler(newVal,oldVal){
             if(newVal != oldVal){
                //发生变化,key改变,组件重载
                this.topBarKeyValue ++
             }
         }

     }
  },

  computed: {
    ...mapState({
      isShowLoginModal: (state) => state.showLoginModal.isShowLoginModal,
      isShowToast: (state) => state.showToast.isShowToast,
    }),
  },

  components: {
    TopBar,
    Header,
    Footer,
    Login,
    Toast,
  },
};
</script>





<style lang="less" >
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

/* ⼊场的起始状态 = 离场的结束状态 */
.fade-enter,.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,.fade-leave-active {
  transition: opacity 0.5s linear;
}


.fade-enter-to, .fade-leave{
  opacity: 1;
}





</style>
